<template>
  <div class="classroom">
    <el-card shadow="always">
    <el-form :model="query" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="区域">
            <el-select
              v-model="query.areaCode"
              placeholder="请选择单位所属区域"
            >
              <el-option
                v-for="item in regionList"
                :key="item.areaCode"
                :label="item.areaName"
                :value="item.areaCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="主体责任">
            <el-select
              v-model="query.mainResponsibilityType"
              placeholder="请选择总监单位类型"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in [    {
                      label: '其他企业(无需设置总监)(仅限市平台单位)',
                      value: '其他企业(无需设置总监)(仅限市平台单位)',
                    },]"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="2">
          <el-button
            type="primary"
            @click="getList()"
            >查询</el-button
          >
        </el-col>
 <el-col :span="2">
          <el-button
            @click="exportTable()"
            >导出</el-button
          >
        </el-col>
        
      </el-row>
    </el-form>

    <el-table :data="tableData" border style="width: 100%"   >
      <el-table-column prop="areaCode" label="地区"> </el-table-column>

      <el-table-column label="三类人(落实情况)" align="center">
        <el-table-column prop="personInCharge" label="负责人"> </el-table-column>
            <el-table-column prop="foodDirector" label="食安总监">
          </el-table-column>
        <el-table-column prop="foodSafetyOfficer" label="食安员"> </el-table-column>
      </el-table-column>

      <el-table-column label="三件事(已落实主体责任企业数)" align="center">
        <el-table-column prop="dailyControl" label="日管控"> </el-table-column>
        <el-table-column prop="weeklyTroubleshooting" label="周排查"> </el-table-column>
        <el-table-column prop="monthlyScheduling" label="月调度"> </el-table-column>
      </el-table-column>

      <el-table-column label="三本账(落实次数)" align="center">
        <el-table-column prop="dailyControlFrequency" label="日记录"> </el-table-column>
        <el-table-column prop="weeklyTroubleFrequency" label="周报告"> </el-table-column>
        <el-table-column prop="monthlyFrequency" label="月纪要"> </el-table-column>
      </el-table-column>

      <el-table-column label="企业数" prop="numberOfDirectors" align="center">
      </el-table-column>
         <!-- <el-table-column label="日管控完成率" prop="dayCompletionRate" align="center" width="120">
            <template slot-scope="scope">
            {{ scope.row.dayCompletionRate }}%
          </template>
      </el-table-column>
       <el-table-column label="周排查完成率" prop="weekCompletionRate" align="center" width="120">
            <template slot-scope="scope">
            {{ scope.row.weekCompletionRate }}%
          </template>
      </el-table-column>
       <el-table-column label="月调度完成率" prop="monthCompletionRate" align="center" width="120">
            <template slot-scope="scope">
            {{ scope.row.monthCompletionRate }}%
          </template>
      </el-table-column>
         <el-table-column label="明确率" prop="clarificationRate" align="center" >
               <template slot-scope="scope">
            {{ scope.row.clarificationRate }}%
          </template>
      </el-table-column> -->
    </el-table>



    <el-table :data="tableData" border style="width: 100%"   class="region" v-show="false">
      <el-table-column prop="areaCode" label="地区"> </el-table-column>

      <el-table-column label="三类人(落实情况)" align="center">
        <el-table-column prop="personInCharge" label="负责人"> </el-table-column>
          <el-table-column prop="foodDirector" label="食安总监">
          </el-table-column>
        <el-table-column prop="foodSafetyOfficer" label="食安员"> </el-table-column>
      </el-table-column>

      <el-table-column label="三件事(已落实主体责任企业数)" align="center">
        <el-table-column prop="dailyControl" label="日管控"> </el-table-column>
        <el-table-column prop="weeklyTroubleshooting" label="周排查"> </el-table-column>
        <el-table-column prop="monthlyScheduling" label="月调度"> </el-table-column>
      </el-table-column>

      <el-table-column label="三本账(落实次数)" align="center">
        <el-table-column prop="dailyControlFrequency" label="日记录"> </el-table-column>
        <el-table-column prop="weeklyTroubleFrequency" label="周报告"> </el-table-column>
        <el-table-column prop="monthlyFrequency" label="月纪要"> </el-table-column>
      </el-table-column>

      <el-table-column label="企业数" prop="numberOfDirectors" align="center">
      </el-table-column>
         <!-- <el-table-column label="日管控完成率(%)" prop="dayCompletionRate" align="center" width="120">
            <template slot-scope="scope">
            {{ scope.row.dayCompletionRate }}
          </template>
      </el-table-column>
       <el-table-column label="周排查完成率(%)" prop="weekCompletionRate" align="center" width="120">
            <template slot-scope="scope">
            {{ scope.row.weekCompletionRate }}
          </template>
      </el-table-column>
       <el-table-column label="月调度完成率(%)" prop="monthCompletionRate" align="center" width="120">
            <template slot-scope="scope">
            {{ scope.row.monthCompletionRate }}
          </template>
      </el-table-column>
         <el-table-column label="明确率(%)" prop="clarificationRate" align="center" >
               <template slot-scope="scope">
            {{ scope.row.clarificationRate }}
          </template>
      </el-table-column> -->
    </el-table>


    </el-card>
  </div>
</template>
<script>
import { exportTb } from "@/utils/XLSX";
import { mainResponsibilityStatistics } from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
    if (this.$route.query.code) {
      this.query.areaCode = this.$route.query.code;
    } else {
      this.query.areaCode = "320500000000";
    }
    this.findListByParentCode();
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      regionList: [],
      query: {
        areaCode: "",
        mainResponsibilityType: "其他企业(无需设置总监)(仅限市平台单位)",
        labelName:"特殊总监企业",
        // isPeople:""
      },
      tableData: [],
    };
  },
  // 方法
  methods: {
    findListByParentCode() {
      this.$http
        .findListByParentCode({
          parentCode: this.query.areaCode,
        })
        .then((res) => {
          this.regionList = res.data;
        });
    },
    async getList() {
      let { data } = await mainResponsibilityStatistics(
       {
             ...this.query,
        mainResponsibilityType:[this.query.mainResponsibilityType],
       }
      );
      this.tableData = data;
    },
exportTable(){
     let time = new Date().getTime();
 exportTb(".region", `导出${time}`);
}
   
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
</style>
